<template>
    <n-form-item v-bind="mergedProps">
        <n-input v-if="config.type === 'password'" type="password" :value="data[config.property]" v-bind="mergedInputProps" />
        <n-input v-if="config.type === 'textarea'" type="textarea" :value="data[config.property]" v-bind="mergedInputProps" />
        <n-input v-else type="text" :value="data[config.property]" v-bind="mergedInputProps" />
    </n-form-item>
</template>

<script setup lang="ts">
import { GetanFormItemProps } from "@/components/Form/src/types"

const props = defineProps<{
    data: Recordable
    config: GetanFormItemProps
}>()

const mergedProps = computed(() => {
    const { property, size, label, labelWidth, rule } = props.config
    return {
        path: property,
        label,
        labelWidth,
        rule,
        size
    }
})

const mergedInputProps = computed(() => {
    return props.config.inputProps ?? {}
})

const emits = defineEmits(["update:data"])

const dataRef = computed(() => props.data)
</script>
